﻿<div ng-controller="OverallPerformanceController as esgOverall">
    <div class="row-fluid">
        <div class="col-md-4">
            <div class="sidebar-table-left no-border">
                <div class="green-number-bubble">
                    {{ esgOverall.esgOverallPerformanceSummary.overall.score | number: 0 }}
                </div>
            </div>
            <div class="sidebar-table-right no-border">
                <div class="title-black-border">Overall ESG Score</div>
                <ul class="esg-ratings">
                    <li ng-class="{ 'active': esgOverall.esgOverallPerformanceSummary.overall.esgPosition == esgOverall.getEsgPosition().IndustryLeader }">Industry Leader</li>
                    <li ng-class="{ 'active': esgOverall.esgOverallPerformanceSummary.overall.esgPosition == esgOverall.getEsgPosition().Outperformer }">Outperformer</li>
                    <li ng-class="{ 'active': esgOverall.esgOverallPerformanceSummary.overall.esgPosition == esgOverall.getEsgPosition().AveragePerformer }">Average Performer</li>
                    <li ng-class="{ 'active': esgOverall.esgOverallPerformanceSummary.overall.esgPosition == esgOverall.getEsgPosition().UnderPerformer }">Under Performer</li>
                    <li ng-class="{ 'active': esgOverall.esgOverallPerformanceSummary.overall.esgPosition == esgOverall.getEsgPosition().IndustryLaggard }">Industry Laggard</li>
                </ul>
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div class="col-md-4">
            <div class="sidebar-table-left no-border">
                <div class="gray-number-bubble" style="font-size:26px;">
                    {{ esgOverall.esgOverallPerformanceSummary.relative.comparativeGroupRank }}
                    <div style="font-size: 18px; padding: 3px 0;">out of</div>
                    {{ esgOverall.esgOverallPerformanceSummary.relative.comparativeGroupSize }}
                </div>
            </div>
            <div class="sidebar-table-right no-border">
                <div class="title-black-border">Relative Position</div>
                <ul class="esg-ratings">
                    <li class="active">{{ esgOverall.esgOverallPerformanceSummary_relative_esgPositionName }}</li>
                </ul>
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div class="col-md-4">
            <div class="sidebar-table-left no-border">
                <div class="gray-number-bubble-2">
                    {{ esgOverall.esgOverallPerformanceSummary.percentile.comparativeGroupPercentileRank }}<sup style="font-size: 11px; top: -14px;">{{ esgOverall.esgOverallPerformanceSummary_percentile_comparativeGroupPercentileRank_ordinalName }}</sup>
                </div>
            </div>
            <div class="sidebar-table-right no-border">
                <div class="title-black-border">Percentile</div>
                <ul class="esg-ratings">
                    <li class="active">{{ esgOverall.esgOverallPerformanceSummary_percentile_esgPositionName }}</li>
                </ul>
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div class="clear"></div>
    </div>
    <div class="row-fluid">
        <div class="col-md-4">
            <div class="sidebar-table-left no-border">
                <div class="gray-number-bubble-2">
                    {{ esgOverall.esgOverallPerformanceSummary.environment.score | number: 0 }}
                </div>
            </div>
            <div class="sidebar-table-right no-border">
                <div class="title-black-border">Environment</div>
                <ul class="esg-ratings">
                    <li class="active">{{ esgOverall.esgOverallPerformanceSummary_environment_esgPositionName }}</li>
                </ul>
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div class="col-md-4">
            <div class="sidebar-table-left no-border">
                <div class="gray-number-bubble-2">
                    {{ esgOverall.esgOverallPerformanceSummary.social.score | number: 0 }}
                </div>
            </div>
            <div class="sidebar-table-right no-border">
                <div class="title-black-border">Social</div>
                <ul class="esg-ratings">
                    <li class="active">{{ esgOverall.esgOverallPerformanceSummary_social_esgPositionName }}</li>
                </ul>
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div class="col-md-4">
            <div class="sidebar-table-left no-border">
                <div class="gray-number-bubble-2">
                    {{ esgOverall.esgOverallPerformanceSummary.governance.score | number: 0 }}
                </div>
            </div>
            <div class="sidebar-table-right no-border">
                <div class="title-black-border">Governance</div>
                <ul class="esg-ratings">
                    <li class="active">{{ esgOverall.esgOverallPerformanceSummary_governance_esgPositionName }}</li>
                </ul>
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div class="clear"></div>
    </div>
</div>